<template>
    <el-card class="menuPageBox" v-if="$auth.checkMenuPermissions('system:menu:search')">
        <!--搜索组件-->
        <search-device :menu-search="menuSearchForm" @onSearch="onSearch" />
        <!--按钮组件-->
        <menu-option-btn @onMenuReplicate="onMenuReplicate" @onOpenDialog="onAddDialog" />
        <!-- 分隔符 -->
        <hr />
        <!-- 数据展示 -->
        <menu-data :form-definition="menuDataPageForm" :data="menuTreeData" :isExpandAll="isExpandAll"
            :addMenu="dataExecuteAddMenu" :updateMenu="dataExecuteUpdateMenu" :deleteMenu="dataExecuteDeleteMenu" />
        <!-- 新增或修改的对话框 -->
        <common-dialog :width="800" ref="dialog" :executeConfirm="executeAddMenu"
            :childRef="openDialogType === 'insert' ? 'menuAddFormREF' : 'menuUpdateFormREF'">
            <template v-slot:content>
                <menu-add v-if="openDialogType === 'insert'" ref="menuAddFormREF" :menu-add="menuAddDataForm"
                    :rules="menuAddDataFormRles" :addLavel="menuAddLavel" />
                <menu-update v-else ref="menuUpdateFormREF" :menuUpdate="menuUpdateDataForm" :rules="menuUpdateDataFormRles"
                    :addLavel="menuAddLavel" />
            </template>
        </common-dialog>
    </el-card>
</template>

<script>
import { noSelectText } from '@/utils/styleUtils'
import searchDevice from "./menuSearch.vue";
import menuOptionBtn from "./menuOptionBtn.vue";
import menuData from "./menuData.vue";
import page from "@/components/common/page.vue";
import commonDialog from "@/components/common/commonDialog.vue";
import menuAdd from "./menuAdd.vue";
import menuUpdate from "./menuUpdate.vue";
import { menuSearchForm } from "./entity/menuSearch";
import { menuDataPageForm } from "./entity/menuDataPageForm";
import { menuAddDataForm, menuAddDataFormRles } from "./entity/menuAddForm";
import { menuUpdateDataForm, menuUpdateDataFormRles } from "./entity/menuUpdateForm";
import {
    getMenuTree,
    addMenuApi,
    updateMenuApi,
    deleteMenuApi,
} from "@/api/system/menusApi";
export default {
    components: {
        searchDevice,
        menuOptionBtn,
        menuData,
        page,
        commonDialog,
        menuAdd,
        menuUpdate,
    },
    data() {
        return {
            //菜单树数据的展示字段及格式
            menuDataPageForm,
            //菜单树数据
            menuTreeData: [],
            //是否开启菜单树扩展/折叠
            isExpandAll: false,
            //搜索菜单对象
            menuSearchForm,
            //对话框打开的类型   insert[新增]   update[更新]
            openDialogType: "insert",
            //新增对象
            menuAddDataForm,
            //新增对象校验的格式
            menuAddDataFormRles,
            //更新对象
            menuUpdateDataForm,
            //更新对象校验的格式
            menuUpdateDataFormRles,
            //新增或更新操作的菜单类型级别 M(目录级进入)   C(菜单级进入)   F(按钮级进入)  控制可选菜单类型
            menuAddLavel: "M",
        };
    },
    methods: {
        //搜索栏组件执行搜索
        onSearch() {
            let query = this.$deepCopy(this.menuSearchForm);
            if (query.isEnable === 'ALL') {
                query.isEnable = null;
            }
            if (query.menuType === 'ALL') {
                query.menuType = null;
            }
            getMenuTree(query)
                .then((data) => {
                    this.menuTreeData = data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });

        },
        //查询菜单树数据
        loadingMenuTree() {
            getMenuTree()
                .then((data) => {
                    this.menuTreeData = data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        //执行数据表格折叠
        onMenuReplicate() {
            this.isExpandAll = !this.isExpandAll;
        },
        //数据表格外按钮打开新增对话框
        onAddDialog() {
            this.menuAddLavel = "M";
            this.openDialogType = "insert";
            this.$refs.dialog.switchEvent();
        },
        //执行新增菜单
        executeAddMenu(refName) {
            //校验数据是否合法
            if (this.$refs[refName].validate()) {
                let checkResult = true;
                if (refName === "menuAddFormREF") {
                    addMenuApi(this.menuAddDataForm)
                        .then((data) => {
                            this.loadingMenuTree();
                            this.$message.success("操作成功");
                        })
                        .catch((err) => {
                            this.$message.error(err);
                            checkResult = false;
                        });
                } else {
                    updateMenuApi(this.menuUpdateDataForm)
                        .then((data) => {
                            this.loadingMenuTree();
                            this.$message.success("操作成功");
                        })
                        .catch((err) => {
                            this.$message.error(err);
                            checkResult = false;
                        });
                }
                return checkResult;
            } else {
                return false;
            }
        },
        //执行数据中的新增按钮
        dataExecuteAddMenu(row) {
            //设置添加按钮的等级
            this.menuAddLavel = row.menuType;
            //设置新增的菜单所属父菜单ID
            this.menuAddDataForm.parentId = row.menuId;
            //修改对话框打开的组件为新增
            this.openDialogType = "insert";
            //打开对话框
            this.$refs.dialog.switchEvent();
        },
        //执行数据中的修改按钮
        dataExecuteUpdateMenu(row) {
            let tempRow = this.$deepCopy(row);
            //设置添加按钮的等级
            this.menuAddLavel = tempRow.menuType;
            //覆盖要修改的数据
            this.menuUpdateDataForm = tempRow;
            //修改对话框打开的组件为修改
            this.openDialogType = "update";
            //打开对话框
            this.$refs.dialog.switchEvent();
        },
        //执行数据中的删除按钮
        dataExecuteDeleteMenu(row) {
            this.$confirm(`确认是否要删除 [${row.name}] ${row.menuTypeName}?`, "操作确认", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteMenuApi(row.menuId)
                        .then((data) => {
                            this.loadingMenuTree();
                            this.$message.success("删除成功");
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => { });
        },
    },
    mounted() {
        noSelectText(".menuPageBox")
        this.loadingMenuTree();
    },
};
</script>

<style></style>
